<!--
 * @Description: 单选组件
-->
<template>
  <div class="cpt_grey_disabled" v-if="disabled">{{ dealLabel(value) }}</div>
  <div v-else>
    <el-radio-group
      class="_ehl_radio_group"
      v-if="options.length > 0"
      @change="valChange"
      v-model="newValue"
    >
      <template v-for="item in options">
        <slot :name="item.slot" :data="{ options: item, value: newValue }">
          <el-radio
            :key="item[value_p]"
            :label="item[value_p]"
            :disabled="disabled || item.disabled"
            :border="item.border"
            >{{ item[label_p] }}
          </el-radio>
        </slot>
      </template>
    </el-radio-group>
    <div v-else>{{ $t('common.huoquzhong') }}</div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import { Radio, RadioGroup } from 'element-ui'
  Vue.use(Radio)
  Vue.use(RadioGroup)
  export default {
    name: 'ehl_radio_group',
    data() {
      return {
        newValue: this.value,
        label_p: this.prop['label'],
        value_p: this.prop['value'],
      }
    },
    watch: {
      value(val, old) {
        this.newValue = val
      },
    },
    props: {
      value: { type: [String, Number], required: true, default: () => 0 },
      options: { type: Array, default: () => [] },
      //是否不可编辑
      disabled: { type: Boolean, default: () => false },
      //value的key映射
      prop: { type: Object, default: () => ({ label: 'label', value: 'value' }) },
    },
    created() {
      this.$emit('init', this.options)
    },
    methods: {
      valChange(val) {
        this.$emit('input', val)
        this.$emit('change', val)
      },
      dealLabel(value) {
        let that = this
        let tmp = this.options.find(i => {
          return i[that.prop['value']] === value
        })
        if (tmp) {
          return tmp[that.prop['label']]
        } else {
          return value
        }
      },
    },
  }
</script>
